<template>
  <div ref="cockpit" v-loading="loading" class="cockpit">
    <header>{{ $t('嘉善管理驾驶舱') }}</header>
    <el-row :gutter="15">
      <el-col :span="6" class="left">
        <div class="area">
          <DealType ref="DealType1" :title="$t('项目类型占比')" :height="smallHeight" :chart-data="dealTypeData" />
        </div>
        <div class="area">
          <DealType ref="DealType2" :title="$t('项目状态占比')" :height="smallHeight" :chart-data="dealStatusData" />
        </div>
        <div class="area">
          <Map ref="Map" :title="$t('投资地域分布')" :height="smallHeight" />
        </div>
      </el-col>
      <el-col :span="10" class="center">
        <div class="area" style="padding: 15px;height: calc(100% - 360px);overflow: auto;">
          <div class="explain">
            <h3>{{ $t('参股基金、直投项目维度') }}</h3>
            <div class="item">
              <p><span>{{ $t('总') }}</span>{{ $t('投资总规模') }}{{ $t('(亿)') }}：<i>{{ formatMoney(summaryDataAmountInvestmentFact, 'm') || '-' }}</i></p>
              <p><span>{{ $t('认') }}</span>{{ $t('我司认缴金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(summaryDataMoney, 'm') || '-' }}</i></p>
              <p><span>{{ $t('实') }}</span>{{ $t('我司实缴金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(summaryDataTotal, 'm') || '-' }}</i></p>
              <p><span>{{ $t('回') }}</span>{{ $t('累计回款金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(summaryData.distributionAmount, 'm') || '-' }}</i></p>
              <p><span>{{ $t('进') }}</span>{{ $t('实缴进度') }}{{ $t('(%)') }}：<i>{{ formatMoneyToYi(summaryDataTotal / summaryDataMoney * 100) || '-' }}</i></p>
              <p><span>{{ $t('数') }}</span>{{ $t('数量') }}{{ $t('个') }}：<i>{{ moneyFormat(summaryDataNumber) || '-' }}</i></p>
            </div>
          </div>
          <div class="explain">
            <h3>{{ $t('非定向基金维度') }}</h3>
            <div class="item">
              <p><span>{{ $t('总') }}</span>{{ $t('基金总规模') }}{{ $t('(亿)') }}：<i>{{ formatMoney(bfData.subscribeScale, 'm') || '-' }}</i></p>
              <p><span>{{ $t('认') }}</span>{{ $t('我司认缴金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(bfData.ourInvestmentAmount, 'm') || '-' }}</i></p>
              <p><span>{{ $t('实') }}</span>{{ $t('基金实缴总规模') }}{{ $t('(亿)') }}：<i>{{ formatMoney(bfData.paidInScale, 'm') || '-' }}</i></p>
              <p><span>{{ $t('数') }}</span>{{ $t('参股基金数量') }}：<i>{{ moneyFormat(bfData.countBf) || '-' }}</i></p>
            </div>
          </div>
          <div class="explain">
            <h3>{{ $t('专项基金维度') }}</h3>
            <div class="item">
              <p><span>{{ $t('总') }}</span>{{ $t('总认缴') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundByCustomerData.subscribedAmount, 'm') || '-' }}</i></p>
              <!-- <p><span>{{ $t('总') }}</span>{{ $t('总实缴') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundByCustomerData.accumulatedPaidMount, 'm') || '-' }}</i></p>-->
              <p><span>{{ $t('认') }}</span>{{ $t('我司总认缴') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundByCustomerData.subscribeScale, 'm') || '-' }}</i></p>
              <p><span>{{ $t('实') }}</span>{{ $t('我司总实缴') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundByCustomerData.ourInvestmentAmount, 'm') || '-' }}</i></p>
              <p><span>{{ $t('数') }}</span>{{ $t('基金个数') }}：<i>{{ moneyFormat(fundByCustomerData.countFund) || '-' }}</i></p>
            </div>
          </div>
          <div class="explain">
            <h3>{{ $t('直投项目维度') }}</h3>
            <div class="item">
              <p><span>{{ $t('协') }}</span>{{ $t('总协议金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(dealData.moneyDeal, 'm') || '-' }}</i></p>
              <p><span>{{ $t('划') }}</span>{{ $t('划款总金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(dealData.totalDeal, 'm') || '-' }}</i></p>
              <p><span>{{ $t('数') }}</span>{{ $t('直投项目数量') }}：<i>{{ moneyFormat(dealData.countDeal) || '-' }}</i></p>
            </div>
          </div>
          <div class="explain">
            <h3>{{ $t('政府产业基金') }}</h3>
            <div class="item">
              <p><span>{{ $t('总') }}</span>{{ $t('政府产业基金总规模') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundData.subscribedAmount, 'm') || '-' }}</i></p>
              <p><span>{{ $t('实') }}</span>{{ $t('基金实缴金额') }}{{ $t('(亿)') }}：<i>{{ formatMoney(fundData.accumulatedPaidMount, 'm') || '-' }}</i></p>
              <p><span>{{ $t('数') }}</span>{{ $t('基金个数') }}：<i>{{ moneyFormat(fundData.countFund) || '-' }}</i></p>
            </div>
          </div>
        </div>
        <div class="area" style="height: 320px">
          <DealPhase ref="DealPhase" :title="$t('浮盈浮亏明细表(2021年)')" :height="320" :chart-data="profitLossData" />
        </div>
      </el-col>
      <el-col :span="8" class="center">
        <div class="area">
          <Pie ref="Pie1" :title="$t('投资轮次占比')" :height="bigHeight" :chart-data="groupRoundData" />
        </div>
        <div class="area">
          <Pie ref="Pie2" :title="$t('聚焦行业占比')" :height="bigHeight" :chart-data="groupIndustryFocusData" />
        </div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import { jsFindDealTypeProportion, jsFindDealStatusProportion, jsFindProfitLoss, findDealGroupIndustryFocus, jsFindDealGroupRound, bfData, dealData, fundData, summary, findFundByCustomerId } from '@/api/base/deal/dealBase'
import DealType from './new/dealType'
import Map from './new/map'
import DealPhase from './new/dealPhase'
import Pie from './new/pie'
export default {
  components: {
    DealType,
    Map,
    DealPhase,
    Pie
  },

  data() {
    return {
      loading: false,
      dealTypeData: [],
      dealStatusData: [],
      profitLossData: {},
      groupRoundData: [],
      groupIndustryFocusData: [],
      bfData: {},
      dealData: {},
      fundData: {},
      summaryData: {},
      fundByCustomerData: {},
      smallHeight: 230,
      bigHeight: 300
    }
  },
  computed: {
    // 计算参股基金，直投项目维度：投资总规模
    summaryDataAmountInvestmentFact() {
      let sum = 0
      // 综合基金-总规模
      const bfData = this.bfData
      if (bfData.subscribeScale) {
        sum += bfData.subscribeScale
      }
      // 定向基金总规模
      const fundByCustomerData = this.fundByCustomerData
      if (fundByCustomerData.subscribedAmount) {
        sum += fundByCustomerData.subscribedAmount
      }
      // 直投基金总规模
      const dealData = this.dealData
      if (dealData.moneyDeal) {
        sum += dealData.moneyDeal
      }
      return sum
    },
    // 计算参股基金，直投项目维度：我司认缴金额
    summaryDataMoney() {
      let sum = 0
      // 综合基金-我司认缴
      const bfData = this.bfData
      if (bfData.ourInvestmentAmount) {
        sum += bfData.ourInvestmentAmount
      }
      // 定向基金我司总认缴
      const fundByCustomerData = this.fundByCustomerData
      if (fundByCustomerData.subscribeScale) {
        sum += fundByCustomerData.subscribeScale
      }
      // 直投基金总规模
      const dealData = this.dealData
      if (dealData.moneyDeal) {
        sum += dealData.moneyDeal
      }
      return sum
    },
    // 计算参股基金，直投项目维度：我司实缴金额
    summaryDataTotal() {
      let sum = 0
      // 综合基金-我司实缴
      const bfData = this.bfData
      if (bfData.paidInScale) {
        sum += bfData.paidInScale
      }
      // 定向基金我司总实缴
      const fundByCustomerData = this.fundByCustomerData
      if (fundByCustomerData.ourInvestmentAmount) {
        sum += fundByCustomerData.ourInvestmentAmount
      }
      // 直投项目划款总金额
      const dealData = this.dealData
      if (dealData.moneyDeal) {
        sum += dealData.moneyDeal
      }
      return sum
    },
    // 计算参股基金，直投项目维度：数量
    summaryDataNumber() {
      let sum = 0
      // 综合基金-参股基金数量
      const bfData = this.bfData
      if (bfData.countBf) {
        sum += bfData.countBf
      }
      // 定向基金-基金个数
      const fundByCustomerData = this.fundByCustomerData
      if (fundByCustomerData.countFund) {
        sum += fundByCustomerData.countFund
      }
      // 直投项目-数量
      const dealData = this.dealData
      if (dealData.countDeal) {
        sum += dealData.countDeal
      }
      return sum
    }

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.load()
      })()
    }
    this.$nextTick(() => {
      this.load()
    })
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      this.loading = true
      jsFindDealTypeProportion().then(res => { // 项目类型占比
        if (res.code === 200 && res.data.length > 0) {
          this.dealTypeData = []
          res.data.forEach(v => {
            var row = {
              name: v.dealTypeLabel,
              value: v.count
            }
            this.dealTypeData.push(row)
          })
        }
      })
      jsFindDealStatusProportion().then(res => { // 项目状态占比
        if (res.code === 200 && res.data.length > 0) {
          this.dealStatusData = []
          res.data.forEach(v => {
            var row = {
              name: v.dealStatusLabel,
              value: v.count
            }
            this.dealStatusData.push(row)
          })
        }
      })
      jsFindProfitLoss().then(res => { // 浮盈浮亏明细表
        if (res.code === 200 && res.data) {
          this.profitLossData = {
            data1: [res.data.total1, res.data.total2, res.data.total3, res.data.total4],
            data2: [res.data.valuationAmount1, res.data.valuationAmount2, res.data.valuationAmount3, res.data.valuationAmount4]
          }
        }
      })
      jsFindDealGroupRound().then(res => { // 投资轮次占比
        if (res.code === 200 && res.data.length > 0) {
          this.groupRoundData = []
          res.data.forEach(v => {
            var row = {
              name: v.dealRoundsInvestment,
              value: v.count
            }
            this.groupRoundData.push(row)
          })
        }
      })

      findDealGroupIndustryFocus().then(res => { // 聚焦行业占比
        if (res.code === 200 && res.data.length > 0) {
          this.groupIndustryFocusData = []
          res.data.forEach(v => {
            var row = {
              name: v.dealIndustryFocus,
              value: v.count
            }
            this.groupIndustryFocusData.push(row)
          })
        }
      })
      bfData().then(res => { // 参股基金维度
        if (res.code === 200 && res.data) {
          this.bfData = res.data
        }
      })
      dealData().then(res => { // 直投项目维度
        if (res.code === 200 && res.data) {
          this.dealData = res.data
        }
      })
      fundData().then(res => { // 管理基金维度
        if (res.code === 200 && res.data) {
          this.fundData = res.data
        }
      })
      summary().then(res => { // 管理基金维度
        if (res.code === 200 && res.data) {
          debugger
          this.summaryData = res.data
        }
      })
      findFundByCustomerId().then(res => { // 定向基金维度
        if (res.code === 200 && res.data) {
          this.fundByCustomerData = res.data
        }
      })

      this.loading = false
    },
    load() {
      this.$nextTick(() => {
        this.initData()
        if (this.$refs?.cockpit?.clientHeight !== undefined) {
          var h = this.$refs.cockpit.clientHeight - 65
          this.smallHeight = h / 3 - 20
          this.bigHeight = h / 2 - 20
          console.log(this.$refs)
          var obj = {}
          for (obj in this.$refs) {
            if (this.$refs[obj]?.initChart !== undefined) {
              this.$refs[obj].initChart()
              this.$refs[obj].chart.resize()
              this.$refs[obj].$_resizeHandler()
            }
          }
        }
      })
    },
    // 缩小一万倍
    formatMoney(num, unit) {
      if (num && typeof num === 'number' && unit && unit === 'm') {
        var val = num / 100000000
        if (val % 1 === 0) {
          return val.toLocaleString('zh', { minimumFractionDigits: 0 })
        } else {
          return val.toLocaleString('zh', { minimumFractionDigits: 4 })
        }
      }
    },
    // 保留小数点
    formatMoneyToYi(num) {
      if (num && typeof num === 'number') {
        var val = num.toFixed(2)
        if (val % 1 === 0) {
          return val.toLocaleString('zh', { minimumFractionDigits: 0 })
        } else {
          return val.toLocaleString('zh', { minimumFractionDigits: 2 })
        }
      }
    }

  }
}
</script>
